<template>
  <div id="app">
    <h1>认识虚拟DOM（Virtual DOM）</h1>
    <p>名字：{{ name }}</p>
    <button @click="changeName">按钮</button>
  </div>
</template>

<script>
// JS执行 
// 数据改变 -> 虚拟DOM（计算变更） -> 操作真实的DOM —> 视图更新
// 什么是虚拟DOM？ 用JS模拟DOM结构
export default {
  data() {
    return {
      name: '哈默'
    }
  },
  methods: {
    changeName() {
      this.name = '小夏'
    }
  }
}
</script>

<style>
#app {
  text-align: center;
}
</style>